<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/view/modules/sys/include/taglib.jsp"%>
<%@ include file="/WEB-INF/view/modules/sys/include/head.jsp"%>
<div class="main-container">
    <div class="padding-md">
        <div class="col-md-6" style="margin: auto">
            <div class="smart-widget">
                <div class="smart-widget-header">
                    发布文章
                    <span class="smart-widget-option">
										<span class="refresh-icon-animated">
											<i class="fa fa-circle-o-notch fa-spin"></i>
										</span>
			                            <a href="#" class="widget-toggle-hidden-option">
			                                <i class="fa fa-cog"></i>
			                            </a>
			                            <a href="#" class="widget-collapse-option" data-toggle="collapse">
			                                <i class="fa fa-chevron-up"></i>
			                            </a>
			                            <a href="#" class="widget-refresh-option">
			                                <i class="fa fa-refresh"></i>
			                            </a>
			                            <a href="#" class="widget-remove-option">
			                                <i class="fa fa-times"></i>
			                            </a>
			                        </span>
                </div>
                <div class="smart-widget-inner">
                    <div class="smart-widget-hidden-section">
                        <ul class="widget-color-list clearfix">
                            <li style="background-color:#20232b;" data-color="widget-dark"></li>
                            <li style="background-color:#4c5f70;" data-color="widget-dark-blue"></li>
                            <li style="background-color:#23b7e5;" data-color="widget-blue"></li>
                            <li style="background-color:#2baab1;" data-color="widget-green"></li>
                            <li style="background-color:#edbc6c;" data-color="widget-yellow"></li>
                            <li style="background-color:#fbc852;" data-color="widget-orange"></li>
                            <li style="background-color:#e36159;" data-color="widget-red"></li>
                            <li style="background-color:#7266ba;" data-color="widget-purple"></li>
                            <li style="background-color:#f5f5f5;" data-color="widget-light-grey"></li>
                            <li style="background-color:#fff;" data-color="reset"></li>
                        </ul>
                    </div>
                    <div class="smart-widget-body">
                        <form action="${pageContext.request.contextPath}/article/add" method="post" class="form-horizontal no-margin"
                              id="type-constraint">
                            <div class="form-group">
                                <label class="control-label col-lg-3">标题</label>
                                <div class="col-lg-9">
                                    <input type="text" id="title" name="title" class="form-control input-sm"  placeholder="请输入标题">
                                </div><!-- /.col -->
                            </div><!-- /form-group -->
                            <div class="form-group">
                                <label class="control-label col-lg-3">关键字</label>
                                <div class="col-lg-9">
                                    <input type="text" id="keywords" name="keywords" class="form-control input-sm"  placeholder="请输入关键字">
                                </div><!-- /.col -->
                            </div><!-- /form-group -->
                            <div class="form-group">
                                <label class="control-label col-lg-3">文章描述</label>
                                <div class="col-lg-9">
                                    <!-- 加载编辑器的容器 -->
                                    <input type="text" id="description" name="description" class="form-control input-sm"  placeholder="请输入文章描述">
                                </div><!-- /.col -->
                            </div><!-- /form-group -->
                            <div class="form-group">
                                <label class="control-label col-lg-3">所属类别</label>
                                <div class="col-lg-9"> <select class="form-control" name="categoryId">
                                    <option value="010010001" >科技</option>
                                    <option value="010010002" selected>人文</option>
                                    <option value="010010003">地理</option>
                                    <option value="010010004">环境</option>
                                </select>
                                </div><!-- /.col -->
                            </div><!-- /form-group -->
                            <div class="form-group">
                                <label class="control-label col-lg-3">内容</label>
                                <div class="col-lg-9">
                                    <script id="container" name="content" type="text/plain">
                    请输入文章内容
                        </script>
                                </div><!-- /.col -->
                            </div><!-- /form-group -->
                            <div class="text-right m-top-md">
                                <button type="submit" class="btn btn-info">发表</button>
                            </div>
                        </form>
                    </div>
                </div><!-- ./smart-widget-inner -->
            </div><!-- ./smart-widget -->
        </div>
    </div>
</div>

<%@include file="/WEB-INF/view/modules/sys/include/footerlib.jsp"%>
<script>
    console.log("welcome");
    $(document).ready(function() {
        $("#type-constraint").validate({
            rules:{
                title: "required",
                content :"required",
                keywords:{required:true}
            },
            messages: {
                title:"请输入标题",
                content :"请输入发表内容",
                keywords:{
                    required:"关键词不能为空"
                }
            }
        })
    })
</script>
<script>
    $(function()	{
        $('.chart').easyPieChart({
            easing: 'easeOutBounce',
            size: '140',
            lineWidth: '7',
            barColor: '#7266ba',
            onStep: function(from, to, percent) {
                $(this.el).find('.percent').text(Math.round(percent));
            }
        });
        $('.sortable-list').sortable();
        $('.todo-checkbox').click(function()	{
            var _activeCheckbox = $(this).find('input[type="checkbox"]');
            if(_activeCheckbox.is(':checked'))	{
                $(this).parent().addClass('selected');
            }
            else	{
                $(this).parent().removeClass('selected');
            }
        });

        //Delete Widget Confirmation
        $('#deleteWidgetConfirm').popup({
            vertical: 'top',
            pagecontainer: '.container',
            transition: 'all 0.3s'
        });
    });

</script>
<!-- 配置文件 -->
<script type="text/javascript" src="${ctxStatic}/ueditor1_4_3_3-utf8-jsp/utf8-jsp/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="${ctxStatic}/ueditor1_4_3_3-utf8-jsp/utf8-jsp/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container',{toolbars: [
        ['fullscreen', 'source', 'undo', 'redo'],
        ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
    ], autoHeightEnabled: true,
        autoFloatEnabled: true});
</script>
</body>

</html>
